<template>
	<view class="AuthModel">

		<view @click="putClick(item)" class="cardItem u-font-32" v-for="(item,index) in list" :key="index">
			<view class=" u-p-b-15 u-p-t-15" style="color: #242424;">
				<text class="card-name">{{item.cardName}}</text>
				<u-tag v-if="item.defaultFlag==1" class="u-m-l-6" type="success" text="结算卡" size="mini"></u-tag>
				<u-tag v-if="item.openState ==1" class="u-m-l-6" type="warning" text="审核中" size="mini"></u-tag>

				<block v-if="item.userType ===3">
					<u-tag class="u-m-l-6" type="primary" text="个人账户" size="mini"></u-tag>
				</block>
				<block v-else>
					<u-tag class="u-m-l-6" type="primary" text="企业账户" size="mini"></u-tag>
				</block>

			</view>
			<view class="u-p-b-15 u-p-t-15">
				<text>{{item.bankName}}</text>
			</view>
			<view class="u-p-b-15 u-p-t-15">
				<text> {{item.cardNo.substr(0,4)}}****{{item.cardNo.substr(-4)}}</text>
			</view>
			<view class="u-m-t-12 u-flex u-row-right" v-if="item.defaultFlag == 0&&item.userType ===3">
				<u-button size="mini" type="success"
					@click="setDefaul(item)">设为收款账户</u-button>
			</view>
		</view>

		<view class="u-p-l-24 u-p-r-24 u-p-t-48 " v-if="role1 && userPinia.isLoginType==3&&showAdd">
			<u-button class="add-btn" @click="addCardType(1)"  type="success" plain ripple><u-icon name="plus-circle"
					size="70"></u-icon> <text class="u-font-36 u-m-l-6">企业收款账户</text></u-button>
		</view>
		<view class="u-p-l-24 u-p-r-24 u-p-t-24" v-if="role3&&showAdd">
			<u-button class="add-btn"  @click="addCardType(3)"  type="success" plain ripple><u-icon name="plus-circle"
					size="70"></u-icon> <text class="u-font-36 u-m-l-6">个人收款账户</text></u-button>
		</view>
	</view>
</template>

<script setup>
	import userSotre from '@/store/user';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import userApi from '@/api/user';
	import {
		computed,
		ref
	} from "vue";
	const userPinia = userSotre()
	const isTrue = ref(false)
	const list = ref([])

	//设置默认卡
	function setDefaul(item) {
		console.log(item);
		uni.showModal({
			title: "是否设为结算卡",
			content: "预计需要1~3工作日审核",
			success: (res) => {
				if (res.confirm) {
					userApi.bankSwitch({
						id: item.accountBankId,
						state: 1,
						ymAccountId: item.ymAccountId
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			}
		})

	}

	onShow(() => {
		// 是否认证
		userApi.getAccountInfo().then(res => {
			if (!uni.$u.test.isEmpty(res.data)) {
				isTrue.value = true
			}
		})
		userApi.accountInfoList().then(res => {
			list.value = res.data
		})


	})

	const role1 = computed(() => {
		let istrue = true
		list.value.find(item => {
			if (item.userType == 1 || item.userType == 2) {
				istrue = false
			}
		})

		return istrue
	})

	const role3 = computed(() => {
		let istrue = true
		list.value.find(item => {
			if (item.userType == 3) {
				istrue = false
			}
		})

		return istrue
	})

	const showAdd = computed(()=>{
		return !list.value.some(item=>item.openState==1)
	})

	async function addCardType(index) {
		//   uni.navigateTo({
		//   	url:'/subpackage/my/fund/addCard',
		//   })
		uni.showLoading({
			title: '加载中...'
		})
		const {
			data
		} = await userApi.getAccountInfo()
		uni.hideLoading()
		if (uni.$u.test.isEmpty(data)) {
			return uni.showModal({
				title: '请先认证身份信息',
				showCancel: false
			})

		}


		uni.$u.route({
			url: '/subpackage/my/fund/addCard',
			params: {
				type: index
			}
		})
	}

	function putClick(item) {
		uni.$u.route({
			url: '/subpackage/my/fund/addCard',
			params: {
				type: item.userType,
				update: true
			}
		})
	}
</script>

<style lang="scss" scoped>
	.cardItem {
		background-color: #9c6868;
		padding: 28upx;
		border-radius: 10upx;
		margin: 28upx;
		box-shadow: 2upx 4upx 10upx rgba(0, 0, 0, .1);
		.card-name{
			display:inline-block;
			vertical-align:-3upx;
		}
	}

	.AuthModel {
		// width: 720upx;
		background-color: #f6f6f6;
		overflow: hidden;

		.head {
			width: 100%;
			// height: 120upx;
			position: relative;
		}

		.head::after {
			content: '身份验证';
			display: block;
			// line-height: 120upx;
			font-size: 34upx;
			color: white;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.conent {
			margin: 28upx;
			background-color: white;

			.items {
				background-color: white;
				border-radius: 14upx;

				.desc {
					margin-top: 16upx;
					font-size: 26upx;
					color: #909399;
				}
			}
		}

	}
	.add-btn{
		&::v-deep button{
			padding: 47upx 0;
		}
	}
</style>
